<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		<title></title>
		<style type="text/css">
			html,
			body,
			img {
				margin: 0;
				padding: 0;
			}
			
			img {
				border: 0;
				display: block;
			}
			
			html,
			body {
				height: 100%;
			}
			
			{
				box-sizing: border-box;
			}
			
			html {
				font-size: 13.33333333333vw;
			}
			
			body {
				background: url(img/p1-Loading.png) no-repeat;
				background-size: 100% 100%;
			}
			
			#wrap {
				display: flex;
				flex-direction: column;
				height: 100%;
			}
			
			.power {
				display: flex;
				height: .4rem;
			}
			
			.header {
				display: flex;
				background: url(img/images/car_02.jpg) no-repeat;
				background-size: 100% 100%;
				height: 4.86rem;
				position: relative;
			}
			
			.left {
				width: 1.77rem;
				height: 1.71rem;
				margin-left: 2.14rem;
				margin-top: 3rem;
				animation: rotate 0.25s 0.5s infinite normal;
			}
			
			.right {
				width: 1.33rem;
				height: 1.3rem;
				margin-left: .71rem;
				margin-top: 3.48rem;
				animation: rotate 0.25s 0.5s infinite normal;
			}
			
			.text {
				width: 6.44rem;
				height: 4.76rem;
				display: flex;
				justify-content: center;
			}
			
			.footer {
				margin-top: .35rem;
				display: flex;
				flex: 1;
				flex-direction: column;
				justify-content: flex-start;
				align-items: center;
				/*height: 2.96rem;*/
				overflow: auto;
				position: relative;
			}
			
			.rice {
				width: 100%;
				height: 1.96rem;
			}
			
			.dic {
				height: .52rem;
				/*margin-bottom: .28rem;*/
				width: .51rem;
				animation: play 0.5s infinite normal;
			}
			
			@keyframes rotate {
				0% {
					transform: rotate(0);
				}
				50% {
					transform: rotate(180deg);
				}
				100% {
					transform: rotate(360deg);
				}
			}
			
			.box {
				position: absolute;
				top: .56rem;
				left: 0;
				text-align: center;
				line-height: .3rem;
				width: 100%;
				height: 2.72rem;
				/*display: none;*/
			}
			
			span {
				
				letter-spacing: 0.1rem;
				display: block;
				font-size: .3rem;
				font-weight: 900;
				/*text-align: center;*/
				line-height: .3rem;
				margin-top: .20rem;
				display: none;
			}
			
			.son {
				margin-top: 0;
				/*display: block;*/
			}
			@keyframes play {
				0% {
					transform: translate(0,0);
				}
			
				100% {
					transform: translate(0,.3rem);
				}
			}
			#button{
				position: absolute;
				border-radius: 50%;
				border: 0.02rem solid white;
				top: .82rem;
				left: 6.26rem;
				width: 0.5rem;
				height: .5rem;
			}
		</style>
	</head>

	<body>
		<audio src="music/bgm.mp3" autoplay="autoplay" loop="loop"></audio>
		<div id="wrap">
			
			<img class="power" src="img/时间及电量.png" />
			<div class="header">
				<div id="button">
				
				</div>
				<img class="left" src="img/左轮.png" />
				<img class="right" src="img/右轮2.png" />
			</div>
			<div class="footer">
				<img class="text" src="img/images/p2_03.jpg" />

				<img class="rice" src="img/粮食.png" />
				<img class="dic" src="img/arrow.png" />
				<div class="box">
					<span class="son">随着农业技术的发展 ,   </span>
					<span>本应成为主食的五谷杂粮 </span>
					<span>却渐渐被快餐零食所替代,</span>
					<span>人们的健康水平</span>
					<span>也在餐饮条件的变化下</span>
					<span>变得参差不齐</span>
				</div>
			</div>
		</div>
		<script type="text/javascript">
			window.onload = function() {

				var num = -1;
				var timer = setInterval(function() {
					
					num++;
//					var box = document.querySelector('#box')
//					box.style.display = 'block'
					var spans = document.querySelectorAll('span');			
					console.log(spans[num]);
					spans[num].style.display = 'block';
					
					if(num == 5){
						clearInterval(timer)
						console.log(1)
					}
				}, 1000)
				var btn = document.querySelector('#button')
				var audio = document.querySelector('audio')
				btn.onclick = function(){
					document.body.removeChild(audio)
//					document.body.appendChild(audio)
				}
				var dic = document.querySelector('.dic')
					dic.onmousemove = function(){
					
				}
			}
		</script>
	</body>

</html>